<template>
  <div id="articleDetail">
    <app-header></app-header>
    <div class="statistics">
        <div>
            <p class="comment_counts"><img src="../assets/icon_comment_color.png"><span class="PLcounts">{{comment_counts}}</span></p>
            <p class="comment_sum"><img src="../assets/icon_saw_color.png"><span class="saw">{{detail.comment_sum}}</span></p>
        </div>
        <div class="share" @click="showSth">
            <img src="../assets/icon_share.png">
            <div class="wechat" v-if="wechatShow">
                <p>使用微信扫一扫</p>
                <img src="../assets/cat.jpg" class="QR_code">
            </div>
        </div>
    </div>
    <div class="articleDetail_content">
        <div class="detail_title">{{detail.title}}</div>
        <div class="agency">
            <span class="source">{{detail.source}}</span>
            <span v-html="dateDiff(detail.create_time)"></span>
        </div>
        <div class="detail_content" v-html="detail.details"></div>
        <div class="remark_on clearfix">
            <p>新闻点评</p>
            <input type="text" class="saySome" placeholder="我有话要说……" v-model="saying">
            <button class="toComment gt" @click="addnewscomment" v-show="havenLogin">评论</button>
            <router-link to="/login" class="toComment gt" v-show="haveLogin">登录评论</router-link>
        </div>
        <div class="comment">
            <div class="comment_title">
                最新评论
            </div>
            <div class="comment_content">
                 <!-- 循环commentIdsList来显示每条评论具体的盖楼评论id -->
                <div class="comment_list clearfix" v-for="commentIds in commentIdsList" :key="commentIds.id">
                    <commentBox :commentPage="commentPage" v-bind:commentItem="commentItem" v-bind:commentIds="commentIds" :level="commentIds.split(',').length"></commentBox>
                </div>
            </div>
            <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
                <span slot="no-more">
                    There is no more News :(
                </span>
            </infinite-loading>
        </div>
    </div>
  </div>
</template>
<script>
import Header from "./blueheader";
import { detail, comment, addArticlecomment } from '../api/example.js';
import InfiniteLoading from "vue-infinite-loading";
import moment from "moment";
import commentBox from './commentBox'
export default {
  name: "articleDetail",
  components: {
    "app-header": Header,
    InfiniteLoading,
    commentBox
  },
  data() {
    return {
        img: "https://dev.apis.sh/PBX40wgC0/static/",
        newsid:'',
        detail:[],
        saying:'',
        commentItem: {},
        commentIdsList: [],
        comment_counts:'',
        wechatShow:false,
        page:1,
        haveLogin:false,
        havenLogin:true,
        commentPage:'',
    };
  },
  created:function(){
      this.judge();
      this.loadDetail();
        this.loadComment();
  },
  methods: {
    // 判断是否登录
    judge: function() {
      if (localStorage.newstoken != "undefined") {
        this.haveLogin = false;
        this.havenLogin = true;
      } else {
        this.haveLogin = true;
        this.havenLogin = false;
      }
    },
    // 转变时间戳截止到现在时间
    dateDiff: function(timestamp) {
      // 补全为13位
      var arrTimestamp = (timestamp + "").split("");
      for (var start = 0; start < 13; start++) {
        if (!arrTimestamp[start]) {
          arrTimestamp[start] = "0";
        }
      }
      timestamp = arrTimestamp.join("") * 1;

      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - timestamp;

      // 如果本地时间反而小于变量时间
      if (diffValue < 0) {
        return "不久前";
      }

      // 计算差异时间的量级
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;

      // 数值补0方法
      var zero = function(value) {
        if (value < 10) {
          return "0" + value;
        }
        return value;
      };

      // 使用
      if (monthC > 1) {
        // 超过1年，直接显示年月日
        return (function() {
          var date = new Date(timestamp);
          return (
            date.getFullYear() +
            "年" +
            zero(date.getMonth() + 1) +
            "月" +
            zero(date.getDate()) +
            "日"
          );
        })();
      } else if (weekC >= 1) {
        return parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
        return parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
        return parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
        return parseInt(minC) + "分钟前";
      }
      return "刚刚";
    },
    // 新闻详情
    loadDetail:function(){
        this.newsid= this.$route.query.newsId;
        detail(this.newsid).then(res =>{
            if(res.data.code === 'success'){
                console.log(res.data)
                this.detail=res.data.data.news;
            }
      })
    },
    // 新闻评论
    loadComment:function(){
        var vm = this
        this.newsid= this.$route.query.newsId;
        comment(this.newsid,1).then(res =>{
            if(res.data.code==='success'){
                console.log(res.data);
                var data1=res.data.data;
                vm.commentIdsList=data1.commentIds;
                vm.comment_counts=data1.counts;
                vm.commentItem=data1.comments;
                this.commentPage =  Math.ceil(data1.counts/5);
            }
        })
    },
    // 添加新闻评论
    addnewscomment:function(){
        addArticlecomment(this.$route.query.newsId,this.saying).then(res =>{
            console.log(res.data);
            alert(res.data.message);
            this.saying = '';
            this.loadComment();
            
        })
    },
    // 分享
    showSth:function(){
        this.wechatShow = !this.wechatShow;
    },
    formattime(time){
        return  moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 懒加载
    onInfinite() {
        this.newsid= this.$route.query.newsId;
        comment(this.newsid,this.page).then(res =>{
            setTimeout(() =>{
                if(res.data.code==='success'){
                    // console.log(res.data);
                    console.log(1);
                    var data1=res.data.data;
                    this.commentIdsList=this.commentIdsList.concat(data1.commentIds);
                    this.comment_counts=data1.counts;
                    this.commentItem = Object.assign({}, this.commentItem, data1.comments);
                }else{
                    console.log(res.data.message);
                }
                if (Math.ceil(res.data.data.counts / 5) === this.page) {
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                } else {
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
                    this.page++;
                }
            },1000);
        })
    },
  }
};
</script>

<style scoped>
#articleDetail{
    position: relative;
    min-width: 1440px;
}
.statistics{
    position: absolute;
    width:134px;
    top:215px;
    left:145px;
}
.statistics p{
    margin-bottom: 10px;
    height:30px;
    color: #9B9B9B;
    font-size: 14px;
    line-height: 30px;
}
.statistics p img{
    width: 30px;
    margin-right: 17px;
    vertical-align: middle;
}
.statistics .share{
    position: relative;
    padding-top: 10px;
    border-top: 1px solid #DCDCDC;
}
.statistics .share .wechat{
    padding: 13.5px 12.5px;
    text-align: center;
    position: absolute;
    top: 10.5px;
    right:-27px;
    border: 1px solid #DCDCDC;
}
.QR_code{
    width:85px;
    height:85px;
}
.articleDetail_content{
    width:858px;
}
.detail_title{
    margin:60px 0 31.4px;
    font-size: 26px;
    color: #333333;
}
.agency{
    margin-bottom: 29.6px;
}
.agency span{
    margin-right: 24.5px;
    font-size: 14px;
    color: #9B9B9B;
}
.agency .source{
    color: #333;
}
.cover_img{
    width:655px;
    margin-bottom:29px;
}
.cover_img .cover{
    width:655px;
    height:337px;
}
.detail_content{
    font-size: 16px;
    color: #333333;
    line-height: 30px;
    padding-bottom: 50.2px;
    border-bottom: 1px solid #DCDCDC;
}
.remark_on{
    margin-top: 50px;
    font-size: 16px;
    color: #6F6F6F;
}
.remark_on p{
    margin-bottom: 20px;
}
.saySome{
    width:858px;
    height:42px;
    line-height: 42px;
    padding:20px;
    margin-bottom: 15.5px;
    border-radius: 4px;
    border: 1px solid #979797;
}
.toComment{
    width:110px;
    height:36px;
    line-break: 36px;
    text-align: center;
    background: #FF8000;
    color:#fff;
    border:none;
    margin-bottom: 35px;
}
.comment{
    font-size: 16px;
    color: #6F6F6F;
    padding-bottom: 20.4px;
}
.comment_title{    
    padding:42px 0 44px;
    border-bottom:1px solid #DCDCDC;
}
.comment_list{
    padding:42px 0 44px;
    border-bottom:1px solid #DCDCDC;
}
.comment_left{
    width:100%;
    height:58px;
}

.commenter_avatar{
    width:58px;
    height:58px;
    border-radius: 50%;
    margin-right: 12px;
}
.comment_msg{
    width:70%;
}
.commenter_msg span{
    margin-right: 24px;
}
.comment_right{
    font-size: 16px;
    color: #333333;
}
.comment_right .thumbs_up span{
    margin-left: 22px;
}
.comment_right .thumbs_up .goodhand,.comment_right .thumbs_up .badhand{
    color: #6F6F6F;
    margin-left: 6px;
}
.floor{
    text-align: right;
    margin-bottom:12px;
}
.list_content{
    margin-top: 12px;
}
</style>
